<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Options </TITLE>
  <style>
  body {
    margin:10px;
    font-size:13px;
    background: #EBEFF9;
    font-family: arial, sans-serif;
  }
  #header {
    padding-bottom:1em;
    padding-top:1em;
  }
  #header h1 {
    font-size: 30px;
    display:inline;
    color: #3d5d6a;
    padding-bottom:40px;
    padding-left:90px;
    padding-top:70px;
    background:url(images/icon_48.png) no-repeat 1px 62px;
  }
  h4 {
    padding-left:0.5em;
    border-bottom: 2px dotted #c3c3c3;
    color: #333333;
    line-height: 28px;
    font-size:15px;
  }
  p {
    padding-left:2em;
    font-size:14px;
  }
  .section-header {
    background:#ebeff9;
    border-top:1px solid #b5c7de;
    font-size:99%;
    padding:3px 0 2px 5px;
    font-weight:bold;
    margin-bottom:1em;
    margin-top:1em;
  }
  .contentBox {
    background-color: #ffffff;
    border: 3px solid #bec9ce;
    -webkit-border-radius: 20px 20px;
    padding: 30px;
    text-align: left;
    margin:50px auto 20px auto;
    width: 600px;
  }
  #downloaderOPtion div{
    line-height: 28px;
    margin-left: 30px;
    margin-bottom: 5px;
  }
  #downloaderOPtion input {
    margin-right: 35px;
  }

  #contextMenuItem {
    margin-left: 32px;
  }
  .closeBtn {
    margin: 20px 0 0 0;
  }
  #footer {
    text-align: center;
    font-size: 13px;
  }
  </style>
 </HEAD>
 <BODY onload="init();">
  <div class="contentBox">
  <div id="header">
    <h1><span id="pageTitle"></span></h1>
  </div>
  <h4 id="downloader"></h4>
  <div id="downloaderOption">
    
  </div>
  <div id="contextMenuItem"><label><input type="checkbox" id="checkboxContextMenu"> <span id="disableMenu"></span></label></div>
  <div class="closeBtn"><button id="saveAndClose" onclick="saveAndClose()"></button></div>
  </div>
  <div id="footer">&copy;2010 Google</div>
  <script>
    var defaultDownloader = localStorage['defaultDownloader'] || 'chrome_downloader';
    var checkboxContextMenu = document.getElementById("checkboxContextMenu");
    bg = chrome.extension.getBackgroundPage();
    function init() {
      i18nReplace('pageTitle', 'page_title');
      i18nReplace('downloader', 'downloader');
      i18nReplace('disableMenu', 'menu_disable');
      i18nReplace('saveAndClose', 'save_and_close');
      if (bg.useContextMenuAPI) {
        document.getElementById('contextMenuItem').style.display = 'none';
      }
      createDownloaderOption(document.getElementById('downloaderOption'));
      if (!eval(localStorage['contextMenu'])) {
        checkboxContextMenu.checked = true;
      }

    }

    function createDownloaderOption(element) {

      var plugin = bg.plugin;
      var enableOptions = bg.downloaderManager.getEnableDownloader(plugin);
      for (var i = 0; i < enableOptions.length; i++) {
        var item = enableOptions[i];
        var imageUrl = chrome.extension.getURL(item.image);
        var option = document.createElement('DIV');
        option.style.background = 'url(' + imageUrl + ') no-repeat 22px 0px';
        var label = document.createElement('LABEL');
        var radio = document.createElement('input');
        radio.type = 'radio';
        radio.name = 'downloader';
        radio.value = item.name;
        if (defaultDownloader == radio.value) {
          radio.checked = true;
        }
        label.appendChild(radio);
        (function(radio) {
          radio.onchange = function() {
            if (radio.checked) {
              defaultDownloader = radio.value;
            }
          }
        })(radio);
        var span = document.createElement('SPAN');
        span.innerText = chrome.i18n.getMessage(item.name);
        label.appendChild(span);
        option.appendChild(label);
        element.appendChild(option);
      }
    }

    function saveAndClose() {
      localStorage['defaultDownloader'] = defaultDownloader;
      localStorage['contextMenu'] = (checkboxContextMenu.checked ? 'false' : 'true');
      chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.remove(tab.id);
      });
    };

	function i18nReplace(id, messageName) {
	  return document.getElementById(id).innerText =
          chrome.i18n.getMessage(messageName);
	};
  </script>
 </BODY>
</HTML>
